<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <router-link tag="li" :to="'/headlinedetails/' + item.id"  class="item border-bottom" v-for="item of list" :key="item.id">
        <div class="item-left">
          <p class="item-left-text">{{item.title}}</p>
          <p class="item-time"><span>{{item.figure}}</span><span>{{item.time}}</span></p>
        </div>
        <div class="item-right">
          <img :src="item.imgUrl">
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  // 引入 better-scroll 页面滑动插件
  import BScroll from  'better-scroll'
  export default {
    name: 'RaidersList',
    props:{
      list: Array
    },
    data () {
      return {

      }
    },
    // 生命钩子，当页面挂载时执行
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll  = new BScroll(this.$refs.wrap)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    overflow hidden
    position: absolute
    top 1.8rem
    right  0
    bottom  0
    left  0

    wrapper()


  .title
    title()

  .item
    item()

  .item-left
    width 4rem
    height 2rem
    display flex
    flex-direction column
    justify-content space-around
    padding-right .8rem

  .item-left-title
    font-size .34rem
    font-weight bolder

  .item-left-text
    line-height .4rem
    overflowEllipsis2()

  .item-right
    width 2.3rem
    height 2rem
    overflow hidden

  .item-right img
    img()

  .item-time
    information()

  .item-more
    button()
</style>
